<template>
  <div class="upload-page-container">
    <!-- 顶部导航栏 -->
    <div class="upload-header">
      <div class="header-content">
        <h1 class="page-title">创作投稿中心</h1>
        <div class="upload-tips">
          <i class="fa fa-lightbulb-o"></i>
          <span>分享你的创作，连接全球用户</span>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="upload-main">
      <div class="upload-form-container">
        <!-- 上传进度条 -->
        <div v-if="uploading" class="progress-overlay">
          <div class="progress-box">
            <div class="progress-bar-wrapper">
              <div class="progress-bar" :style="{ width: uploadProgress + '%' }"></div>
            </div>
            <p class="progress-text">正在上传: {{ uploadProgress }}%</p>
            <p class="progress-status">{{ uploadStatusText }}</p>
          </div>
        </div>

        <form @submit.prevent="handleSubmit" class="upload-form">
          <!-- 内容类型选择 -->
          <div class="form-section">
            <label class="section-label">选择内容类型</label>
            <div class="content-type-selector">
              <div 
                class="type-option"
                :class="{ active: contentType === 'video' }"
                @click="contentType = 'video'"
              >
                <i class="fa fa-video-camera type-icon"></i>
                <span>视频投稿</span>
              </div>
              <div 
                class="type-option"
                :class="{ active: contentType === 'image' }"
                @click="contentType = 'image'"
              >
                <i class="fa fa-picture-o type-icon"></i>
                <span>图片投稿</span>
              </div>
              <div 
                class="type-option"
                :class="{ active: contentType === 'article' }"
                @click="contentType = 'article'"
              >
                <i class="fa fa-file-text-o type-icon"></i>
                <span>文章投稿</span>
              </div>
            </div>
          </div>

          <!-- 文件上传区域 -->
          <div class="form-section" v-if="contentType !== 'article'">
            <label class="section-label">
              {{ contentType === 'video' ? '上传视频文件' : '上传图片文件' }}
            </label>
            <div 
              class="file-upload-area"
              :class="{ 'has-file': selectedFile }"
              @dragover.prevent
              @dragenter.prevent
              @drop="handleFileDrop"
              @click="triggerFileInput"
            >
              <div v-if="!selectedFile" class="upload-placeholder">
                <i class="fa fa-cloud-upload upload-icon"></i>
                <p class="upload-text">点击或拖拽文件到此处</p>
                <p class="file-limit">
                  {{ contentType === 'video' ? '支持 MP4、AVI、MOV，最大 1GB' : '支持 JPG、PNG、GIF，最大 20MB' }}
                </p>
              </div>
              <div v-else class="file-preview">
                <div v-if="contentType === 'video'" class="video-preview">
                  <video :src="filePreviewUrl" controls></video>
                </div>
                <div v-else class="image-preview">
                  <img :src="filePreviewUrl" alt="预览图">
                </div>
                <div class="file-info">
                  <p class="file-name">{{ selectedFile.name }}</p>
                  <p class="file-size">{{ formatFileSize(selectedFile.size) }}</p>
                  <button 
                    type="button" 
                    class="remove-file-btn"
                    @click.stop="removeFile"
                  >
                    <i class="fa fa-times"></i>
                    移除
                  </button>
                </div>
              </div>
              <input 
                ref="fileInput"
                type="file"
                :accept="contentType === 'video' ? 'video/*' : 'image/*'"
                style="display: none"
                @change="handleFileSelect"
              >
            </div>
          </div>

          <!-- 标题 -->
          <div class="form-section">
            <label for="title" class="section-label required">标题</label>
            <input 
              type="text" 
              id="title"
              v-model="title"
              class="form-input"
              placeholder="请输入吸引人的标题（5-50字）"
              maxlength="50"
              required
            >
            <p class="char-count">{{ title.length }}/50</p>
          </div>

          <!-- 封面图（视频/文章） -->
          <div class="form-section" v-if="contentType === 'video' || contentType === 'article'">
            <label class="section-label required">封面图</label>
            <div 
              class="cover-upload-area"
              :class="{ 'has-file': coverImage }"
              @dragover.prevent
              @dragenter.prevent
              @drop="handleCoverDrop"
              @click="triggerCoverInput"
            >
              <div v-if="!coverImage" class="cover-placeholder">
                <i class="fa fa-image cover-icon"></i>
                <p class="cover-text">点击上传封面图</p>
                <p class="cover-tip">建议尺寸 16:9，JPG/PNG，最大 5MB</p>
              </div>
              <div v-else class="cover-preview">
                <img :src="coverImagePreview" alt="封面预览">
                <button 
                  type="button" 
                  class="remove-cover-btn"
                  @click.stop="removeCover"
                >
                  <i class="fa fa-times"></i>
                </button>
              </div>
              <input 
                ref="coverInput"
                type="file"
                accept="image/*"
                style="display: none"
                @change="handleCoverSelect"
              >
            </div>
          </div>

          <!-- 分类 -->
          <div class="form-section">
            <label class="section-label required">分类</label>
            <select v-model="category" class="form-select" required>
              <option value="">请选择分类</option>
              <option value="anime">动画</option>
              <option value="music">音乐</option>
              <option value="game">游戏</option>
              <option value="entertainment">娱乐</option>
              <option value="knowledge">知识</option>
              <option value="tech">科技</option>
              <option value="life">生活</option>
              <option value="food">美食</option>
              <option value="sports">体育</option>
              <option value="car">汽车</option>
              <option value="animal">动物圈</option>
              <option value="movie">电影</option>
              <option value="tv">电视剧</option>
              <option value="comic">漫画</option>
              <option value="study">学习</option>
            </select>
          </div>

          <!-- 标签 -->
          <div class="form-section">
            <label class="section-label">标签</label>
            <div class="tags-input">
              <input 
                v-model="tagInput"
                @keydown.enter.prevent="addTag"
                @input="handleTagInput"
                class="tag-input-field"
                placeholder="输入标签后按回车，最多5个"
                maxlength="10"
              >
              <div v-for="(tag, index) in tags" :key="index" class="tag-item">
                <span>{{ tag }}</span>
                <button type="button" @click="removeTag(index)">×</button>
              </div>
            </div>
            <p class="tag-tip">最多添加5个标签，每个标签不超过10个字符</p>
          </div>

          <!-- 简介 -->
          <div class="form-section">
            <label class="section-label required">简介</label>
            <textarea 
              v-model="description"
              class="form-textarea"
              placeholder="简单介绍你的作品，吸引更多观众（10-200字）"
              rows="4"
              maxlength="200"
              required
            ></textarea>
            <p class="char-count">{{ description.length }}/200</p>
          </div>

          <!-- 文章内容（仅限文章类型） -->
          <div class="form-section" v-if="contentType === 'article'">
            <label class="section-label required">文章内容</label>
            <div class="article-editor">
              <div class="editor-toolbar">
                <button type="button" @click="formatText('bold')" title="加粗">
                  <i class="fa fa-bold"></i>
                </button>
                <button type="button" @click="formatText('italic')" title="斜体">
                  <i class="fa fa-italic"></i>
                </button>
                <button type="button" @click="formatText('underline')" title="下划线">
                  <i class="fa fa-underline"></i>
                </button>
                <button type="button" @click="insertImage" title="插入图片">
                  <i class="fa fa-image"></i>
                </button>
                <button type="button" @click="insertLink" title="插入链接">
                  <i class="fa fa-link"></i>
                </button>
              </div>
              <textarea 
                v-model="articleContent"
                class="article-content"
                placeholder="在这里输入文章内容..."
                rows="10"
                required
              ></textarea>
            </div>
          </div>

          <!-- 投稿设置 -->
          <div class="form-section">
            <label class="section-label">投稿设置</label>
            <div class="upload-settings">
              <label class="setting-item">
                <input type="checkbox" v-model="allowComments">
                <span>允许评论</span>
              </label>
              <label class="setting-item">
                <input type="checkbox" v-model="allowDownload">
                <span>{{ contentType === 'video' ? '允许下载' : '允许保存' }}</span>
              </label>
              <label class="setting-item">
                <input type="checkbox" v-model="isOriginal">
                <span>原创内容</span>
              </label>
            </div>
          </div>

          <!-- 底部提示 -->
          <div class="upload-notice">
            <p><i class="fa fa-info-circle"></i> 请确保你的投稿内容符合社区规范，不得含有违规信息</p>
          </div>

          <!-- 提交按钮 -->
          <div class="form-actions">
            <button type="button" class="btn-cancel" @click="cancelUpload">
              取消
            </button>
            <button type="submit" class="btn-submit" :disabled="!canSubmit">
              <i class="fa fa-paper-plane"></i>
              提交投稿
            </button>
          </div>
        </form>
      </div>

      <!-- 右侧提示区域 -->
      <div class="upload-guide">
        <div class="guide-section">
          <h3>投稿指南</h3>
          <ul class="guide-list">
            <li><i class="fa fa-check-circle"></i> 确保内容清晰、高质量</li>
            <li><i class="fa fa-check-circle"></i> 添加准确的标题和标签以获得更多曝光</li>
            <li><i class="fa fa-check-circle"></i> 选择合适的分类让目标用户更容易找到你</li>
            <li><i class="fa fa-check-circle"></i> 原创内容将获得更多推荐机会</li>
          </ul>
        </div>
        <div class="guide-section">
          <h3>常见问题</h3>
          <div class="faq-item">
            <p class="faq-question">投稿审核需要多久？</p>
            <p class="faq-answer">一般在24小时内完成审核，高峰期可能稍有延迟</p>
          </div>
          <div class="faq-item">
            <p class="faq-question">如何获得更多推荐？</p>
            <p class="faq-answer">高质量、原创、互动性强的内容更容易获得推荐</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import uploadService from '../services/uploadService'

export default {
  name: 'UploadPageView',
  setup() {
    // 基础状态
    const contentType = ref('video')
    const title = ref('')
    const description = ref('')
    const category = ref('')
    const tagInput = ref('')
    const tags = ref([])
    const allowComments = ref(true)
    const allowDownload = ref(false)
    const isOriginal = ref(true)
    
    // 文件相关
    const selectedFile = ref(null)
    const filePreviewUrl = ref('')
    const coverImage = ref(null)
    const coverImagePreview = ref('')
    const articleContent = ref('')
    
    // 上传状态
    const uploading = ref(false)
    const uploadProgress = ref(0)
    const uploadStatusText = ref('')
    
    // 文件输入引用
    const fileInput = ref(null)
    const coverInput = ref(null)

    // 计算属性 - 是否可以提交
    const canSubmit = computed(() => {
      const hasFile = contentType.value !== 'article' ? !!selectedFile.value : true
      const hasCover = contentType.value !== 'image' ? !!coverImage.value : true
      
      return hasFile && 
             hasCover &&
             title.value.trim().length >= 5 &&
             description.value.trim().length >= 10 &&
             category.value !== '' &&
             (contentType.value === 'article' ? articleContent.value.trim().length > 0 : true)
    })

    // 方法
    const triggerFileInput = () => {
      fileInput.value?.click()
    }

    const triggerCoverInput = () => {
      coverInput.value?.click()
    }

    const handleFileSelect = (event) => {
      const file = event.target.files[0]
      if (file) {
        validateAndSetFile(file)
      }
    }

    const handleFileDrop = (event) => {
      const file = event.dataTransfer.files[0]
      if (file) {
        validateAndSetFile(file)
      }
    }

    const handleCoverSelect = (event) => {
      const file = event.target.files[0]
      if (file) {
        validateAndSetCover(file)
      }
    }

    const handleCoverDrop = (event) => {
      const file = event.dataTransfer.files[0]
      if (file) {
        validateAndSetCover(file)
      }
    }

    const validateAndSetFile = (file) => {
      // 文件验证逻辑
      const maxSize = contentType.value === 'video' ? 1024 * 1024 * 1024 : 20 * 1024 * 1024
      
      if (file.size > maxSize) {
        ElMessage.error(`文件大小超过限制，最大允许 ${contentType.value === 'video' ? '1GB' : '20MB'}`)
        return
      }

      if (contentType.value === 'video' && !file.type.startsWith('video/')) {
        ElMessage.error('请上传视频文件')
        return
      }

      if (contentType.value === 'image' && !file.type.startsWith('image/')) {
        ElMessage.error('请上传图片文件')
        return
      }

      // 设置文件并生成预览
      selectedFile.value = file
      const reader = new FileReader()
      reader.onload = (e) => {
        filePreviewUrl.value = e.target.result
      }
      reader.readAsDataURL(file)
    }

    const validateAndSetCover = (file) => {
      // 封面图验证
      const maxSize = 5 * 1024 * 1024
      
      if (file.size > maxSize) {
        ElMessage.error('封面图片大小不能超过5MB')
        return
      }

      if (!file.type.startsWith('image/')) {
        ElMessage.error('请上传图片文件作为封面')
        return
      }

      // 设置封面图并生成预览
      coverImage.value = file
      const reader = new FileReader()
      reader.onload = (e) => {
        coverImagePreview.value = e.target.result
      }
      reader.readAsDataURL(file)
    }

    const removeFile = () => {
      selectedFile.value = null
      filePreviewUrl.value = ''
      if (fileInput.value) {
        fileInput.value.value = ''
      }
    }

    const removeCover = () => {
      coverImage.value = null
      coverImagePreview.value = ''
      if (coverInput.value) {
        coverInput.value.value = ''
      }
    }

    const handleTagInput = (event) => {
      // 过滤特殊字符，只允许中文、英文、数字
      tagInput.value = event.target.value.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '')
    }

    const addTag = () => {
      const tag = tagInput.value.trim()
      if (tag && !tags.value.includes(tag) && tags.value.length < 5) {
        tags.value.push(tag)
        tagInput.value = ''
      }
    }

    const removeTag = (index) => {
      tags.value.splice(index, 1)
    }

    const formatText = (type) => {
      // 简单的文本格式化
      const textarea = document.querySelector('.article-content')
      if (!textarea) return
      
      const start = textarea.selectionStart
      const end = textarea.selectionEnd
      const selected = articleContent.value.substring(start, end)
      
      let formatted = ''
      switch (type) {
        case 'bold':
          formatted = `**${selected}**`
          break
        case 'italic':
          formatted = `*${selected}*`
          break
        case 'underline':
          formatted = `__${selected}__`
          break
      }
      
      articleContent.value = 
        articleContent.value.substring(0, start) + 
        formatted + 
        articleContent.value.substring(end)
      
      // 重新聚焦并设置光标位置
      setTimeout(() => {
        textarea.focus()
        const newCursorPos = start + formatted.length
        textarea.setSelectionRange(newCursorPos, newCursorPos)
      }, 0)
    }

    const insertImage = () => {
      const url = prompt('请输入图片URL：')
      if (url) {
        const textarea = document.querySelector('.article-content')
        const start = textarea.selectionStart
        const end = textarea.selectionEnd
        
        articleContent.value = 
          articleContent.value.substring(0, start) + 
          `![图片](${url})` + 
          articleContent.value.substring(end)
          
        setTimeout(() => {
          textarea.focus()
          const newCursorPos = start + url.length + 8
          textarea.setSelectionRange(newCursorPos, newCursorPos)
        }, 0)
      }
    }

    const insertLink = () => {
      const url = prompt('请输入链接URL：')
      const text = prompt('请输入链接文本：', '链接')
      
      if (url) {
        const textarea = document.querySelector('.article-content')
        const start = textarea.selectionStart
        const end = textarea.selectionEnd
        
        articleContent.value = 
          articleContent.value.substring(0, start) + 
          `[${text || '链接'}](${url})` + 
          articleContent.value.substring(end)
          
        setTimeout(() => {
          textarea.focus()
          const newCursorPos = start + url.length + text.length + 4
          textarea.setSelectionRange(newCursorPos, newCursorPos)
        }, 0)
      }
    }

    const formatFileSize = (bytes) => {
      if (bytes < 1024) return bytes + ' B'
      else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB'
      else if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB'
      else return (bytes / 1073741824).toFixed(1) + ' GB'
    }

    const handleSubmit = async () => {
      if (!canSubmit.value) return

      uploading.value = true
      uploadProgress.value = 0
      uploadStatusText.value = '正在准备上传...'

      try {
        // 模拟上传过程
        const formData = new FormData()
        formData.append('title', title.value)
        formData.append('description', description.value)
        formData.append('category', category.value)
        formData.append('tags', JSON.stringify(tags.value))
        formData.append('contentType', contentType.value)
        formData.append('allowComments', allowComments.value)
        formData.append('allowDownload', allowDownload.value)
        formData.append('isOriginal', isOriginal.value)
        
        if (contentType.value !== 'article' && selectedFile.value) {
          formData.append('file', selectedFile.value)
        }
        
        if (coverImage.value) {
          formData.append('cover', coverImage.value)
        }
        
        if (contentType.value === 'article') {
          formData.append('articleContent', articleContent.value)
        }

        // 模拟上传进度
        let progress = 0
        const interval = setInterval(() => {
          progress += 5
          uploadProgress.value = progress
          
          if (progress <= 30) {
            uploadStatusText.value = '正在上传文件...'
          } else if (progress <= 70) {
            uploadStatusText.value = '正在处理内容...'
          } else if (progress < 100) {
            uploadStatusText.value = '正在保存信息...'
          } else {
            clearInterval(interval)
            uploadStatusText.value = '上传完成！'
            
            // 延迟后显示成功消息并跳转
            setTimeout(() => {
              ElMessage.success('投稿成功！')
              uploading.value = false
              // 重置表单
              resetForm()
            }, 1000)
          }
        }, 300)

        // 实际项目中这里应该调用真实的上传接口
        // await uploadService.uploadContent(formData)

      } catch (error) {
        ElMessage.error('上传失败，请重试')
        console.error('Upload error:', error)
        uploading.value = false
      }
    }

    const cancelUpload = () => {
      if (confirm('确定要取消投稿吗？未保存的内容将丢失。')) {
        resetForm()
      }
    }

    const resetForm = () => {
      title.value = ''
      description.value = ''
      category.value = ''
      tags.value = []
      tagInput.value = ''
      selectedFile.value = null
      filePreviewUrl.value = ''
      coverImage.value = null
      coverImagePreview.value = ''
      articleContent.value = ''
      allowComments.value = true
      allowDownload.value = false
      isOriginal.value = true
      uploadProgress.value = 0
      uploadStatusText.value = ''
      
      if (fileInput.value) fileInput.value.value = ''
      if (coverInput.value) coverInput.value.value = ''
    }

    return {
      contentType,
      title,
      description,
      category,
      tagInput,
      tags,
      selectedFile,
      filePreviewUrl,
      coverImage,
      coverImagePreview,
      articleContent,
      allowComments,
      allowDownload,
      isOriginal,
      uploading,
      uploadProgress,
      uploadStatusText,
      fileInput,
      coverInput,
      canSubmit,
      triggerFileInput,
      triggerCoverInput,
      handleFileSelect,
      handleFileDrop,
      handleCoverSelect,
      handleCoverDrop,
      removeFile,
      removeCover,
      handleTagInput,
      addTag,
      removeTag,
      formatText,
      insertImage,
      insertLink,
      formatFileSize,
      handleSubmit,
      cancelUpload
    }
  }
}
</script>

<style scoped>
.upload-page-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.upload-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 2rem 0;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  font-size: 2.5rem;
  color: white;
  margin: 0 0 0.5rem 0;
  font-weight: 700;
}

.upload-tips {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.upload-main {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2rem;
}

.upload-form-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  position: relative;
}

.upload-guide {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  height: fit-content;
}

/* 进度条覆盖层 */
.progress-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.progress-box {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  min-width: 300px;
}

.progress-bar-wrapper {
  width: 100%;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0.5rem 0;
}

.progress-status {
  color: #666;
  margin: 0;
}

/* 表单样式 */
.form-section {
  margin-bottom: 2rem;
}

.section-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
  font-size: 1rem;
}

.section-label.required::after {
  content: ' *';
  color: #f56565;
}

/* 内容类型选择 */
.content-type-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.type-option {
  padding: 1.5rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
  background: #f8f9fa;
}

.type-option:hover {
  border-color: #667eea;
  background: #f0f2ff;
}

.type-option.active {
  border-color: #667eea;
  background: #667eea;
  color: white;
}

.type-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* 文件上传区域 */
.file-upload-area,
.cover-upload-area {
  border: 2px dashed #e0e0e0;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fafafa;
}

.file-upload-area:hover,
.cover-upload-area:hover {
  border-color: #667eea;
  background: #f0f2ff;
}

.file-upload-area.has-file,
.cover-upload-area.has-file {
  border-style: solid;
  background: white;
}

.upload-icon,
.cover-icon {
  font-size: 3rem;
  color: #667eea;
  margin-bottom: 1rem;
}

.upload-text,
.cover-text {
  font-size: 1.1rem;
  color: #666;
  margin: 0 0 0.5rem 0;
}

.file-limit,
.cover-tip {
  font-size: 0.9rem;
  color: #999;
  margin: 0;
}

/* 文件预览 */
.file-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-preview,
.image-preview {
  margin-bottom: 1rem;
  max-width: 100%;
}

.video-preview video,
.image-preview img,
.cover-preview img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.file-info {
  text-align: left;
  width: 100%;
}

.file-name {
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  word-break: break-all;
}

.file-size {
  color: #666;
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
}

.remove-file-btn,
.remove-cover-btn {
  background: #f56565;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.3s ease;
}

.remove-file-btn:hover,
.remove-cover-btn:hover {
  background: #e53e3e;
}

.remove-cover-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0.25rem 0.5rem;
}

.cover-preview {
  position: relative;
  display: inline-block;
}

/* 表单输入 */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 1rem;
  transition: border 0.3s ease;
  font-family: inherit;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.char-count {
  text-align: right;
  font-size: 0.9rem;
  color: #666;
  margin: 0.25rem 0 0 0;
}

/* 标签输入 */
.tags-input {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 0.5rem;
  min-height: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.tag-input-field {
  border: none;
  outline: none;
  font-size: 0.9rem;
  flex: 1;
  min-width: 120px;
  padding: 0.25rem 0;
}

.tag-item {
  background: #667eea;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.tag-item button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  margin-left: 0.25rem;
}

.tag-tip {
  font-size: 0.9rem;
  color: #666;
  margin: 0.5rem 0 0 0;
}

/* 文章编辑器 */
.article-editor {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.editor-toolbar {
  background: #f8f9fa;
  padding: 0.5rem;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  gap: 0.5rem;
}

.editor-toolbar button {
  background: white;
  border: 1px solid #e0e0e0;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.editor-toolbar button:hover {
  background: #e9ecef;
  border-color: #667eea;
}

.article-content {
  width: 100%;
  min-height: 300px;
  padding: 1rem;
  border: none;
  resize: vertical;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
}

/* 投稿设置 */
.upload-settings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.setting-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.setting-item input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* 提示区域 */
.upload-notice {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.upload-notice p {
  margin: 0;
  color: #92400e;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 按钮区域 */
.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
}

.btn-cancel,
.btn-submit {
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-cancel {
  background: #e5e7eb;
  color: #374151;
}

.btn-cancel:hover {
  background: #d1d5db;
}

.btn-submit {
  background: #667eea;
  color: white;
}

.btn-submit:hover:not(:disabled) {
  background: #5a67d8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-submit:disabled {
  background: #a5b4fc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 右侧指南 */
.guide-section {
  margin-bottom: 2rem;
}

.guide-section h3 {
  font-size: 1.2rem;
  margin: 0 0 1rem 0;
  color: #333;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #667eea;
}

.guide-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.guide-list li {
  padding: 0.5rem 0;
  color: #666;
  font-size: 0.95rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.guide-list i {
  color: #48bb78;
  margin-top: 0.2rem;
}

.faq-item {
  margin-bottom: 1rem;
}

.faq-question {
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: #333;
  font-size: 0.95rem;
}

.faq-answer {
  color: #666;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .upload-main {
    grid-template-columns: 1fr;
  }
  
  .upload-guide {
    order: -1;
  }
}

@media (max-width: 768px) {
  .upload-header {
    padding: 1.5rem 0;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .upload-form-container {
    padding: 1.5rem;
  }
  
  .content-type-selector {
    grid-template-columns: 1fr;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .btn-cancel,
  .btn-submit {
    width: 100%;
    justify-content: center;
  }
}
</style>